<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>聊天室 2</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #f0f2f5;
            padding-top: 60px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .chat-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 20px;
        }
        #messages {
            height: 60vh;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 20px;
            overflow-y: auto;
            background: #f9f9f9;
        }
        .message {
            padding: 8px 0;
            margin: 5px 0;
            line-height: 1.4;
        }
        .message.system {
            color: #666;
            font-style: italic;
        }
        .message .username {
            font-weight: bold;
            color: #2c3e50;
        }
        .message .timestamp {
            color: #7f8c8d;
            font-size: 0.8em;
        }
        .message .content {
            margin-left: 5px;
        }
        .input-area {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }
        #username {
            width: 150px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        #input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            padding: 10px 20px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }
        button:hover {
            background: #2980b9;
        }
        .home-btn {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 999;
            padding: 10px 15px;
            background: #3498db;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            transition: all 0.3s;
        }
        .home-btn:hover {
            background: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        .user-count {
            text-align: right;
            color: #7f8c8d;
            font-size: 0.9em;
            margin-bottom: 10px;
        }
        .room-header {
            text-align: center;
            color: #4361ee;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<a href="/index.html" class="home-btn">🏠 返回列表</a>
<div class="chat-container">
    <h1 class="room-header">休闲娱乐</h1>
    <div class="user-count" id="userCount">在线用户: 0</div>
    <div id="messages"></div>
    <div class="input-area">
        <input type="text" id="username" placeholder="用户名" value="匿名用户">
        <input type="text" id="input" placeholder="输入消息...">
        <button id="sendBtn">发送</button>
    </div>
</div>

<script>
    // WebSocket连接管理 - 连接到房间2
    const ws = new WebSocket('ws://' + window.location.host + '/chat/room2');
    const messagesDiv = document.getElementById('messages');
    const userCountDiv = document.getElementById('userCount');
    let username = '匿名用户';
    let userCount = 0;

    // 设置用户名
    document.getElementById('username').addEventListener('change', (e) => {
        const newUsername = e.target.value.trim() || '匿名用户';
        if (newUsername !== username) {
            username = newUsername;
            // 不再发送用户名修改通知
        }
    });

    // 消息接收处理
    ws.onmessage = function(e) {
        const message = e.data;

        // 检查是否是系统消息
        const isSystemMessage = message.includes('[系统]');

        const div = document.createElement('div');
        div.className = isSystemMessage ? 'message system' : 'message';

        // 解析消息格式 [时间] 用户名: 内容
        const timeEnd = message.indexOf(']');
        const userEnd = message.indexOf(':', timeEnd);

        const timestamp = message.substring(1, timeEnd);
        const msgUsername = message.substring(timeEnd + 2, userEnd);
        const content = message.substring(userEnd + 2);

        div.innerHTML = `
                <span class="timestamp">${timestamp}</span>
                <span class="username">${msgUsername}</span>
                <span class="content">${content}</span>
            `;

        messagesDiv.appendChild(div);
        messagesDiv.scrollTop = messagesDiv.scrollHeight;
    };

    // 发送消息功能
    document.getElementById('sendBtn').addEventListener('click', () => {
        const input = document.getElementById('input');
        if (input.value.trim()) {
            // 发送消息时带上当前用户名
            const message = `[${username}] ${input.value}`;
            ws.send(message);
            input.value = '';
            input.focus();
        }
    });

    // 输入框回车发送
    document.getElementById('input').addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            document.getElementById('sendBtn').click();
        }
    });

    // 连接关闭处理
    ws.onclose = () => {
        const div = document.createElement('div');
        div.className = 'message system';
        div.textContent = '连接已断开，请刷新页面重新连接';
        messagesDiv.appendChild(div);
    };
</script>
</body>
</html>